import React, {Component} from 'react';
import StoryList from "./StoryList";

class Story extends Component {
    state = {boy:{},girl:{}}
    render() {
        return (
            <div>
                {/*方案一：返回一个函数*/}
                {/*<StoryList bookList={this.state.boy.bookList} render={()=><h2 style={{color:'blue'}}>{this.state.boy.typeName}</h2>}/>*/}
                {/*<StoryList bookList={this.state.girl.bookList} render={()=><h2 style={{color:'red'}}>{this.state.girl.typeName}</h2>}/>*/}

                {/*方案二：通过组件标签内传值*/}
                <StoryList bookList={this.state.boy.bookList}>
                    <h2 style={{color:'blue'}}>{this.state.boy.typeName}</h2>
                </StoryList>
                <StoryList bookList={this.state.girl.bookList}>
                    <h2 style={{color:'red'}}>{this.state.girl.typeName}</h2>
                </StoryList>
            </div>
        );
    }
    async getStory(){
        const boy = await this.$http.get('http://zsj.com:8081/boy')
        const girl = await this.$http.get('http://zsj.com:8081/girl')
        this.setState({
            boy,
            girl
        })
    }
    componentDidMount() {
        this.getStory()
    }
}

export default Story;